<template>
  <div class="headerInfo">
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          :size="30"
        />
        <span class="name">{{ name }}</span>
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="exitClick">
            <el-icon :size="18"><CircleClose /></el-icon>
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import router from '@/router'
import { localCache } from '@/utils/cache'

const name = localCache.getCache('userInfo').name

function exitClick() {
  localCache.removeCache('token')
  localCache.removeCache('userInfo')
  localCache.removeCache('userMenus')
  localCache.removeCache('permissionsList')

  router.push('/login')
}
</script>

<style lang="scss" scoped>
.headerInfo {
  background-color: transparent;
  cursor: pointer;
  .el-dropdown-link {
    display: flex;
    align-items: center;
    justify-content: center;

    .name {
      margin-left: 10px;
      font-size: 18px;
    }
  }
}
.headerInfo {
  :global(.el-dropdown-menu_item) {
    line-height: 36px I !important;
    padding: 6px 22px;
  }
}
</style>
